<template>
    <div class="status-panel-com">
        <div class="panel-list" :class="status+'-list'">
            <div class="panel-content">
                <div class="panel-row">
                    <span>紧急程度</span>
                    <span class="panel-right panel-status">{{statusWords[status]}}</span>
                </div>
                <div class="panel-row">
                    <span>{{name}}</span>
                    <span class="panel-right">{{val}}</span>
                </div>
            </div>
            <!-- <img class="panel-img" :src="require('@/assets/img/bg-'+status+'.png')" alt=""> -->
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({ name: "statusPanelCom" })
export default class index extends Vue {
    @Prop({ default: "" }) status!: string;
    @Prop({ default: "" }) name!: string;
    @Prop({ default: "" }) val!: string;
    statusWords = {
        danger: "高",
        warning: "中",
        success: "低",
    };
}
</script>

<style lang="scss">
.status-panel-com {
    margin: 30px 0;
    margin-right: 20px;
    display: inline-block;
    .panel-list {
        width: 210px;
        height: 104px;
        position: relative;
        color: #fff;
        border-radius: 12px;
    }
    .panel-content {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        font-size: 16px;
        font-weight: bold;
        padding: 20px 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .panel-img {
        width: 210px;
    }
    .panel-row {
        display: flex;
        justify-content: space-between;
    }
    .panel-status {
        background-color: #fff;
        padding: 0 20px;
        border-radius: 100px;
    }
    .danger-list {
        background-color: #F76A4A;
        .panel-status {
            color: #f76a4a;
        }
    }
    .warning-list {
        background-color: #faa440;
        .panel-status {
            color: #faa440;
        }
    }
    .success-list {
        background-color: #22b585;
        .panel-status {
            color: #22b585;
        }
    }
}
</style>
